<template>
  <Page name="转账记录" :loading="loading">
    <div slot="name" v-if="userInfo.name && isUser"  class="topn-name">
      <p>{{userInfo.name}}</p>
      <span>{{userInfo.account}}</span>
    </div>
    <div class="log-page">
      <div class="tabs">
        <div class="tabs-wrap">
            <ui-tabs ref="tabs" :list="channel" :active="channel_id" @choose="changeTab"  />
        </div>
      </div>
      <div class="scroll-box">
        <ScrollList ref="scroll" :config="config" @bottom="getPage" @pull="pull">
          <div class="list" v-if="list.length">
            <section v-for="month in list" :key="month.count_months.month">
              <div class="header">
                <div class="month">
                  {{month.count_months.month}}
                </div>
                <div class="amount block">
                  <div class="income" v-if="month.count_months.income">
                    收入: {{month.count_months.income}}
                  </div>
                  <div class="out" v-if="month.count_months.out">
                    转出: {{month.count_months.out}}
                  </div>
                </div>
              </div>
              <div class="month-list">
                <nuxt-link :to="{name:'bill-bill-details',query:{bill_id:item.bill_id}}" class="item" v-for="item in month.list" :key="item.bill_id">
                  <img :src="item.logo">
                  <div class="info">
                    <div class="name">{{item.remark}}</div>
                    <div class="time">{{item.pay_time_str}}</div>
                  </div>
                  <div class="amount">
                    <span :class="{'on':m.indexOf('-')!==-1}" v-for="(m,idx) in item.amount" :key="idx">{{m}}</span>
                  </div>
                </nuxt-link>
              </div>
            </section>
          </div>
          <div v-else-if="config.end" class="empty-list">
            <ui-empty :empty='{text:"暂无数据"}'></ui-empty>
          </div>
        </ScrollList>
      </div>

    </div>
  </Page>
</template>

<script>
import Page from '~/components/page'
import Tabs from '~/components/common/tabs';
import ScrollList from '~/components/ScrollList'
import UiEmpty from  "~/components/empty";

export default {
  components:{
    Page,
    [Tabs.name]:Tabs,
    ScrollList,
    UiEmpty
  },
  async asyncData(context){
    const { query ,app,store,redirect} = context;
    try{
      let globalCurrencys = store.state.currencys;
      if(globalCurrencys.length === 0){
        await store.dispatch('GET_CURRENCYS');
        globalCurrencys = store.state.currencys;
      }

      let channel = [{
          text:"全部",
          id:"all"
        }].concat(globalCurrencys.map(item=>({
          text:item.name,
          id:item.code
        })));

      return {
        channel,
        isUser:!!query.id, //是否查看指定人员的账单
        userInfo:store.state.accept.userInfo || {},
      }

    }catch(e){
      app.$error(e);
      app.$toast('获取币种信息失败').then(()=>{
        if(context.from.name !== 'accept-list'){ //有上一页
            app.router.back();
          }else{
            redirect('/');
          }
      })
    }
  },
  data(){
    return {
      loading:false,
      config:{
        pull:false,
        bottom:false,
        end:true
      },
      page:1,
      total:0,
      channel_id:'all',
      currency_code:'',
      list:[],
    }
  },
  computed:{
    total_list(){
      let len = 0;
      this.list.forEach(item=>{
        len += item.list.length
      })
      return len;
    }
  },
  mounted(){
    this.$nextTick(()=>{
      this.$refs.scroll.$emit('pulling');
    })
  },
  methods:{
    async pull(cb){
      this.$nuxt.$loading.start();
      this.page = 1;
      this.config.end = false;
      await this.getPage(true);
      this.$nuxt.$loading.finish();
      cb();
    },
    async getPage(isRefresh){
      if(this.loading || this.config.end) return false;
      try{
        this.loading = true;
        let params = {
          page:this.page,
          currency_code:this.currency_code == 'all' ? '' : this.currency_code
        }
        if(this.isUser && this.userInfo.name){
          params.trans_uid = this.userInfo.uid
        }
        let {data:rs} = await this.$axios.post('?ct=api&ac=trans_pay_logs',params);
        if(rs.code == 0){
          let { data } = rs;
          //格式化amount为数组
          data.list.forEach(item=>{
            item.list.forEach(m=>{
              m.amount = m.amount.split(/[\r\n]/)
            })
          })
          this.total = data.total;
          if(isRefresh){
            this.list = data.list;
          }else{
            this.list = this.list.concat(data.list);
          }
          if(this.total_list >= Number(this.total)){
            this.config.end = true;
          }else{
            this.page++;
            this.config.end = false;
          }
        }else{
          this.$toast(rs.msg);
        }
      }catch(e){
        this.$toast('请求失败');
        this.$error(e);
      }
      this.loading = false;
      setTimeout(()=>{
        this.loading=false;
      },2000)
    },
    changeTab(item){
      this.config.end=false;
      this.page = 1;
      this.currency_code = item.id;
      this.list=[];
      this.getPage();
    },
  }
}
</script>

<style lang="less" scoped>
.scroll-box {
  .list {
    .header {
      position:sticky;
      top:@app-header-height;
      padding:20px 30px;
      background-color:rgb(237,238,240);

      .month {
        display: block;
        font-size:30px;
        color:rgb(41,41,41)
      }

      .amount {
        display: flex;
        align-items: center;
        font-size:24px;
        color:rgb(153,153,153);

        .income {
          margin-right:60px;
        }
        .income,.out {
          margin-top:20px;
        }
        &.block {
          flex-direction: column;
          align-items: flex-start;
          .income {
            margin-right:0;
          }
        }
      }
    }

    .month-list {
      .item {
        display: flex;
        align-items: center;
        min-height:136px;
        background-color:#fff;
        padding:20px 30px;
        overflow: hidden;
        & + .item {
          border-top:1px solid #f6f6f6;
        }
        img {
          display: block;
          margin-right:30px;
          width:48px;
          height:48px;
          border-radius: 50%;
        }
        .info {
          flex:1;
          overflow: hidden;
          .name,.time {
            .text-ellipsis();
          }
          .name {
            font-size:30px;
            color:rgb(41,41,41);
          }
          .time {
            margin-top:20px;
            font-size:24px;
            color:rgb(153,153,153);
          }
        }
        .amount {
          margin-left:30px;
          color:rgb(41,41,41);
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          height: 100%;
          overflow: hidden;
          justify-content: center;
          span {
            & + span {
              margin-top:2px;
            }
            line-height: 1;
            font-size:24px;
          }
          .on {
            color:rgba(240,85,33);
          }
        }
      }
    }
  }
}

.topn-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin:0 auto;
  max-width: 70%;
  height:100%;
  overflow: hidden;
  color:rgb(41,41,41);

  p,span {
    max-width: 100%;
    line-height: 1;
    .text-ellipsis();

  }
  p {
    font-size:32px;
  }
  span {
    margin-top:12px;
    font-size:24px;
  }
}
</style>
